import React from 'react'
import jStyle from './jStyle.css'

class Niuniu extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
    }
  }

  componentDidMount() {
  }

  componentDidUpdate() {
  }

  render() {
    const {battleData, gameInfo, backroom} = this.props
    const {finishList, room} = battleData
    const roomDescribe = JSON.parse(room.roomDescribe)
    const time = window.util.getDateTime(room.createTime)
    const bodyCn = jStyle['game-body'] + ' pure-g'
    const ruleName = `${roomDescribe.ruleType * 10}回合封顶`
    const shareStyle = {width: gameInfo.width, height: gameInfo.height, margin: 'auto'}
    return <div id="share" className="result-wrapper" style={shareStyle}>
      <div className="game-bg">
        <img src="img/jinhuaShare/jinhuaDi.png" className="bg-image" alt="" />
      </div>
      <div className={jStyle['game-info']}>
        <div className={jStyle['game-info-row']}>
          <span className="pull-left">帅帅 {gameInfo.name}</span>
          <span className="pull-right">{time}</span>
        </div>
        <div className={jStyle['game-info-row']}>
          <span className="pull-left">房号: {room.roomNo} &nbsp; 局数: {room.turns} / {room.totalTurns}</span>
          <span className="pull-right">玩法: {ruleName}</span>
        </div>
      </div>

      <div className={bodyCn}>
        {
          finishList.map((player, index) => {
            const bgSrc = player.point > 0 ? 'img/jinhuaShare/light-di.png' : 'img/jinhuaShare/default-di.png'
            const nicknameCn = 'black'
            const labelCn = jStyle['game-body-label'] + ' pure-u-1-3 relative'
            const pointCn = player.point > 0 ? jStyle['win'] : ''
            return <div className={labelCn} key={index}>
              <div className={jStyle['card']}>
                <img className={jStyle['card-bg']} src={bgSrc} alt="" />
                <div className={jStyle['card-title']}>
                  <div className={jStyle['card-title-blank']}></div>
                  <div className={nicknameCn + ' ' + jStyle['player-nickname']}>{player.nickname}</div>
                  <div className={jStyle['player-id']}>
                    ID: <span>{player.lftId}</span>
                  </div>
                  {
                    player.owner ? <img className={jStyle['owner']} src="img/jinhuaShare/owner.png" alt=""/> : null
                  }
                </div>
                <div className="card-body">
                  {
                    player.suitDescribe.map((suit, index) => {
                      return <div key={index}>{suit.name}: {suit.count}</div>
                    })
                  }
                </div>
                <div className={jStyle['card-bottom']}>
                  <div className={jStyle['score-detail']}>
                    <span className={pointCn}>{player.point}</span>
                  </div>
                  {
                    player.winner ? <img className={jStyle['big-winner']} src="img/bullShare/big-winner.png" alt="" /> : null
                  }
                </div>
              </div>
            </div>
          })
        }
      </div>

      <div className="game-bottom pure-g">
        <div className="pure-u-1-2 text-center">
          <img onClick={backroom} src="img/jinhuaShare/back-room.png" alt="" />
        </div>
        <div className="pure-u-1-2 text-center">
          <img src="img/jinhuaShare/btn-share.png" alt="" />
        </div>
      </div>

    </div>
  }
}

export default Niuniu